<template>
	<div class="index">
		<Header></Header>
		<!-- 轮播 -->
		<div class="swiper">
			<el-carousel style="width: 100%; height: 28rem">
				<el-carousel-item style="width: 100%; height: 28rem;" v-for="item in imglist" :key="item.id">
					<div class="banner">
						<span>{{ item.title }}</span>
						<p style="width: 80%; text-align: center; font-size: 18px;">{{ item.content }}</p>
						<div class="banners" @click="detailsPath(item.path)"><p>了解详情</p></div>
					</div>
					<div class="bor_one"><img :src="item.img" class="bor_one" /></div>
				</el-carousel-item>
			</el-carousel>
		</div>

		<!-- 内容 -->
		<div class="conent">
			<div class="platform">
				<div style="margin: 3rem;">
					<img class="title"  src="../assets/index/platform.png" alt="" />
					<div class="content">
						依托云计算、大数据等信息技术，以空间信息技术为核心，网络技术为支撑，为地质工作提供智能化的信息集成、分析和处理平台。整合城市地质、地热资源、海洋地质三个专题数据及测绘地理信息数据，实现多源异构数据一张图展示及地上地下一体化表达，实现地质调查信息高效共享和精准服务，充分发挥地质工作先行性、基础性、公益性、战略性作用。
					</div>
				</div>
			<!-- 	<div class="content-b">
					<div>
						<img src="../assets/index/bigData.png" alt="" />
						<div class="fwb c007 ls01">大数据技术</div>
					</div>
					<div>
						<img src="../assets/index/index-3.png" alt="" />
						<div class="fwb c007 ls01">物联网技术</div>
					</div>
					<div>
						<img src="../assets/index/index-4.png" alt="" />
						<div class="fwb c007 ls01">云计算技术</div>
					</div>
					<div>
						<img src="../assets/index/index-5.png" alt="" />
						<div class="fwb c007 ls01">地质灾害检测</div>
					</div>
					<div>
						<img src="../assets/index/index-1.png" alt="" />
						<div class="fwb c007 ls01">卫星定位技术</div>
					</div>
					<div>
						<img src="../assets/index/index-2.png" alt="" />
						<div class="fwb c007 ls01">信息化网络平台</div>
					</div>
				</div> -->
			</div>
			<div class="disaster">
				<div class="disaster-img"><img src="../assets/index/disaster.png" alt="" /></div>
				<div class="disaster-title">
					<img src="../assets/index/disaster-1.png" alt="" />
					<div class="disaster-data">
						<div class="disaster-data-1">
							<span class="cfff fz3 fwb">{{ instationData.drill }}</span>
							<span class="cfff">个</span>
							<div class="cfff fwb pt1">钻孔</div>
						</div>
						<div class="disaster-data-1">
							<span class="cfff fz3 fwb">{{ instationData.monitor_copy }}</span>
							<span class="cfff">个</span>
							<div class="cfff fwb pt1">监测点</div>
						</div>
						<div class="disaster-data-1">
							<span class="cfff fz3 fwb">{{ instationData.all }}</span>
							<span class="cfff">条</span>
							<div class="cfff fwb pt1">地质资料</div>
						</div>
						<div class="disaster-data-1">
							<span class="cfff fz3 fwb">{{ instationData.iiiustrated_books }}</span>
							<span class="cfff">幅</span>
							<div class="cfff fwb pt1">图件</div>
						</div>
					</div>
				</div>
			</div>
			<!-- <div v-for="(item, index) in list" :key="item.id">
				<div class="conent1" :class="index % 2 == 0 ? 'odd' : ''">
					<div class="conent-top">
						<div style="text-align: center; width: 47%; margin: auto; padding: 2rem 0;">
							<div style="font-weight: bold;font-size: 1.5rem;letter-spacing:0.1rem;margin: 1.5rem 0 ;">
								<img style="width: 1.5rem;height: 1.5rem;padding-right: 0.5rem;vertical-align: auto;" :src="item.imgIcon" alt="" />
								{{ item.title }}
							</div>
							<div style="width: 100%;color: #000000; margin-bottom: 1rem;letter-spacing:0.1rem;">{{ item.content }}</div>
							<div><img :src="item.img" alt="" /></div>
						</div>
					</div>
				</div>
			</div> -->
			<!-- <div class="disaster">
				<div class="disaster-img"><img src="../assets/index/map-img.png" alt="" /></div>
				<div class="disaster-title">
					<img src="../assets/index/sandong.png" alt="" />
					<div class="disaster-sandong">
						山东主要地质遗迹划分为标准地质剖面、著名古生物化石遗址、地质构造形迹、典型地质与地貌景观、特大型矿床、地质灾害遗迹等6大类
						山东主要地质遗迹划分为标准地质剖面、著名古生物化石遗址、地质构造形迹、典型地质与地貌景观、特大型矿床、地质灾害遗迹等6大类
						山东主要地质遗迹划分为标准地质剖面、著名古生物化石遗址、地质构造形迹、典型地质与地貌景观、特大型矿床、地质灾害遗迹等6大类
						山东主要地质遗迹划分为标准地质剖面、著名古生物化石遗址、地质构造形迹、典型地质与地貌景观、特大型矿床、地质灾害遗迹等6大类
					</div>
				</div>
			</div> -->
			<!-- <div style="width: 100%;background-color: #FFFFFF;">
				<div class="geology">
					<div class="geology-type">
						<div
							:class="geologyChecked == item.id ? 'geology-type-c' : 'geology-type-z'"
							v-for="(item, index) in geologyList"
							:key="index"
							@click="geologyClick(item.id)"
						>
							<img :src="item.img" alt="" />
							<div>{{ item.name }}</div>
						</div>
					</div>
					<img style="width: 95%;height: 90%; padding: 1rem 0 2rem 0;" src="../assets/index/geology.png" alt="" />
				</div>
			</div> -->
			<!-- <div class="real-time">
				<img src="../assets/index/geology-c.png" alt="" />
				<div style="width: 100%; text-align: right; font-weight: bold; cursor: pointer;" @click="more">
					更多
					<i class="el-icon-d-arrow-right"></i>
				</div>
				<div style="width: 100%;display: flex;">
					<div style="width: 40%; margin-right: 0.7rem;">
						<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
					</div>
					<div style="width: 60%; height: 100%;">
						<div
							style="display: flex;
			flex-wrap: wrap;"
						>
							<div style="width: 45%; height: 5rem; background-color: #FFFFFF;padding: 1.2rem 0.7rem;" v-for="(item, index) in getNewsList" :key="index">
								<div style="text-align: left; font-weight: bold; font-size: 0.9rem;">{{ item.company }}</div>
								<div style="text-align: left; font-size: 0.7rem; margin-top: 0.2rem;">{{ item.title }}</div>
								<div style="text-align: right; font-size: 0.7rem;">{{ formatDate(item.create_time) }}</div>
							</div>
						</div>
					</div>
				</div> -->
			</div>
		<!-- 底部 -->
		<Footer></Footer>
		</div>
	</div>
</template>

<script>
import { newsVideo, listCount } from '@/api/realTime.js';
import { geology } from '@/api/resourceCenter.js';
export default {
	name: 'index',
	data() {
		return {
			tokes: '',
			realVideo: null,
			playerOptions: {
				playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
				autoplay: false, // 如果为true,浏览器准备好时开始回放。
				muted: false, // 默认情况下将会消除任何音频。
				loop: false, // 是否视频一结束就重新开始。
				preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				language: 'zh-CN',
				aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				sources: [
					{
						type: 'video/mp4', // 类型
						src: '' // url地址
					}
				],
				poster: require('../assets/index/1.png'), // 封面地址
				notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
				controlBar: {
					timeDivider: true, // 当前时间和持续时间的分隔符
					durationDisplay: true, // 显示持续时间
					remainingTimeDisplay: false, // 是否显示剩余时间功能
					fullscreenToggle: true // 是否显示全屏按钮
				}
			},
			imglist: [
				{
					id: 1,
					img: require('../assets/index/dizhi.png'),
					title: '城市地质三维管理系统',
					path:'/geologyCity',
					content: '建立三维可视化地质模型，构建地下地上一体的“透明城市”，拓展城市发展空间，实现地质信息共享，为城市规划建设运行管理全过程提供三维可视化支撑。'
				},
				{
					id: 2,
					img: require('../assets/index/dire.png'),
					path:'/geothermy',
					title: '山东省地热资源管理系统',
					content: '以GIS技术、三维可视化技术为依托，提供基于地热资源相关数据的处理、查询、分析评价服务的功能，实现对全省地热资源信息“一张图”展示，为地热资源合理开发利用和保护信息的需求提供基础信息服务。'
				},
				{
					id: 3,
					img: require('../assets/index/haiyang1.png'),
					path:'/ocean',
					title: '区域海洋地质调查管理系统',
					content: '集成海洋地质、海洋测绘、海洋物探等成果，全面反映海岸带以及近海海域矿产资源分布、水文地质工程地质环境地质条件，不良地质环境问题等，为海洋经济发展提供基础地质数据和技术支撑。 '
				}
				// {
				//   id: 4,
				//   img: require("../assets/index/shouyeimg.png"),
				//   title: "山东省地矿业务应用系统",
				//   content: "实现了地上地下一体化的地质与地理数据的集成叠加显示",
				// },
			],
			list: [
				{
					id: 1,
					title: '城市地质三维管理系统',
					img: require('../assets/index/1.png'),
					imgIcon: require('../assets/index/little-icon.png'),
					content:
						' 城市地质三维管理系统旨在以GIS、三维可视化、网络发布等技术为支撑，利用已有数据与成果资料，实现不同时期的基础地理、地质资源、工程地质、水文地质、生态环境地质等地质信息的管理应用，系统提供地质数据的管理、多专业数据查询、专题图件编绘、统计分析、专业分析评价、地质信息发布、三维地质结构建模、可视化分析和模型管理功能，实现地质信息的数字化、可视化、信息化。通过信息化工作进一步形成地质成果服务于城市规划、建设与管理。'
				},
				{
					id: 2,
					title: '山东省地热资源管理系统',
					img: require('../assets/index/dire.png'),
					imgIcon: require('../assets/index/little-icon.png'),
					content:
						' 山东省地热资源管理系统以GIS技术、三维可视化技术为依托，面向专业人士提供基于地热资源相关数据的处理、查询、分析评价服务的功能，实现对地热资源的评价，为地热资源合理开发利用和保护信息的需求提供基础信息服务。'
				},
				{
					id: 3,
					title: '区域海洋地质调查管理系统',
					img: require('../assets/index/haiyang.png'),
					imgIcon: require('../assets/index/little-icon.png'),
					content:
						'区域海洋地质调查管理系统集成海洋地质、海洋测绘、海洋物探等成果，全面反映海岸带以及近海海域矿产资源分布、水文地质工程地质环境地质条件，不良地质环境问题等，为海洋经济发展提供基础地质数据，搭建起海洋地质工作信息支撑软件，为海洋地质调查、海洋测绘、海洋工程勘察等工作提供技术支撑，促进海洋地质高效、有序发展，提升海上山东建设综合地质保障能力。'
				}
			],
			geologyList: [
				{
					name: '标准地质剖面',
					img: require('../assets/index/geology.png'),
					id: 1
				},
				{
					name: '著名古生物化石遗址',
					img: require('../assets/index/geology.png'),
					id: 2
				},
				{
					name: '地质构造形迹',
					img: require('../assets/index/geology.png'),
					id: 3
				},
				{
					name: '经典地质与地貌景观',
					img: require('../assets/index/geology.png'),
					id: 4
				},
				{
					name: '特大型矿床',
					img: require('../assets/index/geology.png'),
					id: 5
				},
				{
					name: '地质灾害遗迹',
					img: require('../assets/index/geology.png'),
					id: 6
				}
			],
			swiperOption: {
				slidesPerView: 3,
				loop: true,
				autoplay: {
					delay: 3000,
					stopOnLastSlide: false,
					disableOnInteraction: false
				},
				// 设置点击箭头
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev'
				}
			},
			getNewsList: [],
			geologyChecked: null,
			instationData: {} //站内数据
		};
	},
	created() {
		let data = {
			pageSize: 10,
			page: 1,
			type: 1,
			content: null
		};
		geology(data).then(res => {
			this.getNewsList = res.data.arr.splice(0, 4);
		});
		// newsVideo().then(res => {
		// 	this.playerOptions.sources.map(val => {
		// 		val.src = this.url + res.data.vieo;
		// 	});
		// });
		listCount().then(res => {
			this.instationData = res.data;
		});
	},
	mounted() {},
	methods: {
		//地质选中状态
		geologyClick(val) {
			this.geologyChecked = val;
		},
		//详情路由
		detailsPath(path){
			this.$router.push({
				path
			})
		},
		//实时通讯
		more() {
			this.$router.push({
				path: '/realTime'
			});
		}
	}
};
</script>

<!--  Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
/deep/.el-menu.el-menu--horizontal {
	border: none;
}
.swiper {
	width: 100%;
	height: 28rem;
	position: relative;
	.banner {
		width: 100%;
		height: 100%;
		position: absolute;
		// background: url(../assets/my/my图片.png);
		// background: rgba(61, 59, 59, 0.5);
		// background: linear-gradient(to right,rgba(0,0,128, 0.8), rgba(61, 59, 59, 0.1));
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		z-index: 1000;
		color: #fff;
		span {
			font-size: 3rem;
		}
		p {
			font-size: 1.5rem;
		}
		.banners {
			width: 9rem;
			height: 2.5rem;
			border-radius: 3rem;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFFFFF;
			color: #000000;
			cursor: pointer;
			p {
				font-size: 1.1rem;
			}
		}
	}
	.bor_one {
		width: 100%;
		height: 100%;
		// background: rgba(61, 59, 59, 0.3);
	}
}
.conent {
	width: 100%;
	// height: auto;
	margin-top: 1.5rem;
	.platform {
		width: 67%;
		margin: auto;
		text-align: center;
		.title {
			height: 4rem;
		}
		.content {
			text-align: left;
			margin: 4rem 0;
			line-height: 2rem;
			text-indent:2em;
			// color: #9d9d9d;
		}
		.content-b {
			display: flex;
			display: -webkit-flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;
			margin-bottom: 2.7rem;
			img {
				width: 6rem;
				height: 6rem;
			}
		}
	}
	.disaster {
		height: 21.5rem;
		position: relative;
	}
	.disaster-img img {
		width: 100%;
		height: 22rem;
	}
	.disaster-title img {
		position: absolute;
		height: 4rem;
		left: 47.3%;
		top: 2rem;
	}
	.disaster-sandong {
		position: absolute;
		text-align: center;
		letter-spacing: 0.1rem;
		width: 50%;
		left: 25%;
		top: 10rem;
	}
	.disaster-data {
		position: absolute;
		left: 0;
		top: 10rem;
		display: flex;
		text-align: center;
		// width: 100% !important;
		// display: -webkit-flex;
		// justify-content: space-between;
		// flex-direction: row;
		// flex-wrap: wrap;
		.disaster-data-1 {
			width: 30rem;
			text-align: center;
		}
	}
	.geology {
		width: 47%;
		margin: auto;
		text-align: center;
		.geology-type {
			display: flex;
			display: -webkit-flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;
			padding-top: 2rem;
			.geology-type-z {
				width: 7rem;
				height: 9rem;
				img {
					margin-top: 0.5rem;
					border-radius: 50%;
					width: 4rem;
					height: 4rem;
				}
				div {
					padding-top: 0.2rem;
					width: 6rem;
					margin: auto;
				}
			}
			.geology-type-c {
				border-bottom: 0.19rem #0f7ac1 solid;
				border-top: 0.17rem #eeeeee solid;
				border-left: 0.17rem #eeeeee solid;
				border-right: 0.17rem #eeeeee solid;
				box-sizing: border-box;
				border-radius: 0.5rem 0.5rem 0.2rem 0.2rem;
				width: 7rem;
				height: 9rem;
				background-color: #ffffff;
				img {
					margin-top: 0.5rem;
					border-radius: 50%;
					width: 4rem;
					height: 4rem;
				}
				div {
					padding-top: 0.2rem;
					width: 6rem;
					font-weight: bold;
					color: #0f7ac1;
					margin: auto;
				}
			}
		}
	}
	.real-time {
		width: 47%;
		margin: auto;
		text-align: center;
		margin-bottom: 2.5rem;
		img {
			padding-top: 1rem;
			height: 4rem;
		}
	}
}
.conent1 {
	width: 100%;
	height: auto;
	.conent-top {
		width: 100%;
		height: auto;
		// .conent-top-left {
		// 	width: 43%;
		// 	height: auto;
		// 	img {
		// 		width: 100%;
		// 		height: 100%;
		// 	}
		// }
		// .conent-top-right {
		// 	width: 50%;
		// 	height: auto;
		// 	margin: auto;
		// 	.span1 {
		// 		color: #1669c1;
		// 		display: flex;
		// 		font-size: 1.1rem;
		// 		.yuan {
		// 			width: 0.4rem;
		// 			height: 0.4rem;
		// 			border-radius: 50%;
		// 			border: 0.1rem solid #1669c1;
		// 			margin-top: 0.5rem;
		// 			margin-right: 0.5rem;
		// 		}
		// 	}
		// 	.span2 {
		// 		text-indent: 1rem;
		// 		margin-top: 0.2rem;
		// 	}
		// }
	}
	// conent
	.conent-conent {
		width: 100%;
		height: auto;
		display: flex;
		.conent-conent-left {
			width: 50%;
			height: auto;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.conent-conent-right {
			width: 30%;
			height: auto;
			margin: auto;
			.span1 {
				color: #1669c1;
				display: flex;
				font-size: 1.1rem;
				.yuan {
					width: 0.4rem;
					height: 0.4rem;
					border-radius: 50%;
					border: 0.1rem solid #1669c1;
					margin-top: 0.5rem;
					margin-right: 0.5rem;
				}
			}
			.span2 {
				text-indent: 1rem;
				margin-top: 0.2rem;
			}
		}
	}
}
.odd {
	width: 100%;
	background-color: #ffffff;
}
</style>
